<script>
	import api from './common/httpRequest.js'
	export default {
		onLaunch: function() {
			console.log('App Launch')
			this.wechatLogin()
		},
		created() {
		},
		methods:{
			wechatLogin() {
				console.log('检查是否登陆过',)
				uni.login({
					provider: 'weixin',
					success:async (loginRes)  => {
					  // 获取code
					  const code = loginRes.code;
					  const res = await api.post('/login/silentLogin',{code:code},true)
					  console.log('发送code到后端',res)
					  if (res.data.code == 200) {
						uni.setStorageSync('token', res.data.data.token);
						uni.setStorageSync('userInfo', res.data.data.user_info);
					  }
					},
					fail: (err) => {
					  console.error('微信登录失败', err);
					}
				})
			}
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
	.particles {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 0;
	  
	  .particle {
	    position: absolute;
	    border-radius: 50%;
	    animation: float 15s infinite linear;
	  }
	}
	@keyframes float {
	  0% {
	    transform: translateY(0) rotate(0deg);
	  }
	  100% {
	    transform: translateY(-100vh) rotate(360deg);
	  }
	}
	
	.snow-canvas {
		  position: fixed;
		  left: 0;
		  top: 0;
		  width: 100vw;
		  height: 100vh;
		  z-index: 0; /* 在最底层 */
		  pointer-events: none;
		}
	
		/* 过渡动画 */
		.fade-in {
			animation: fadeIn 0.8s ease-in-out;
		}
	
		.fade-in-up {
			animation: fadeInUp 0.8s ease-in-out;
		}
	
		@keyframes fadeIn {
			from {
				opacity: 0;
			}
	
			to {
				opacity: 1;
			}
		}
	
		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(40rpx);
			}
	
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
		
		.bottom-nav {
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  width: 100%;
		  height: 130rpx;
		  background-color: #fff;
		  display: flex;
		  z-index: 1000;
		  align-items: center;
		  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		  
		  .nav-item {
		    flex: 1;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		    
		    image {
		      width: 48rpx;
		      height: 48rpx;
		      margin-bottom: 8rpx;
		    }
		    
		    text {
		      font-size: 22rpx;
		      color: #666;
		      
		      &.active {
		        color: #FF5C8D;
		      }
		    }
		  }
		}
		
		
		
.love-letter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    width: 80%;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    z-index: 1001;
    position: relative;
  }
  
  .modal-header {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    image {
      width: 36rpx;
      height: 36rpx;
      opacity: 0.5;
    }
  }
  
  .letter-textarea {
    width: 100%;
    min-height: 300rpx;
    padding: 30rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
  
  .placeholder {
    color: #ccc;
  }
  
  .word-count {
    text-align: right;
    padding: 0 30rpx 20rpx;
    font-size: 24rpx;
    color: #999;
  }
  
  .modal-footer {
    display: flex;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #eee;
    
    button {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      border-radius: 40rpx;
      margin: 0 10rpx;
      
      &::after {
        border: none;
      }
    }
    
    .cancel-btn {
      background-color: #f5f5f5;
      color: #666;
    }
    
    .send-letter-btn {
      background-color: #ff6600;
      color: #fff;
    }
  }
}
button {
  flex: 1;
  font-size: 28rpx;
  border-radius: 40rpx;
  margin: 0 10rpx;
  
  &::after {
	border: none;
  }
}

.submit-btn {
  background: linear-gradient(to right, #4a90e2, #5fb0e5);
  color: #fff;
  text-align: center;
  padding: 25rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  margin: 50rpx 0;
  box-shadow: 0 8rpx 16rpx rgba(74, 144, 226, 0.3);
}
</style>
